import { Card, Flex } from "@/components/base";
import styles from './index.module.less';
import { LeftOutlined } from "@ant-design/icons";
import { Typography } from "@/components/typography";

const { Text } = Typography

export interface IPageHeaderProps {
    /** 返回按钮事件 */
    onBack?: () => void;

    /** 标题 */
    title?: string;

    /** 副标题 */
    subTitle?: string;

    /** 右侧扩展内容 */
    extra?: React.ReactNode;

    /** 下侧扩展内容 */
    footer?: React.ReactNode;
}

/** 
 * 页面头部组件
 */
export function PageHeader(props: IPageHeaderProps) {

    const { onBack, title, subTitle, extra, footer } = props;

    return (
        <Card className={styles['page-header']} >
            <Flex vertical gap={8} style={{ alignItems: 'normal' }}>
                <Flex align="center">
                    {onBack && <div style={{ paddingRight: 10 }} onClick={onBack} ><LeftOutlined /></div>}
                    <Flex vertical align='flex-start' >
                        {title && <Text strong style={{ fontSize: 20 }}>{title}</Text>}
                        {subTitle && <Text type='secondary' style={{ fontSize: 14 }}>{subTitle}</Text>}
                    </Flex>
                    <div style={{ flex: 1 }}></div>
                    {extra}
                </Flex>
                {footer}
            </Flex>
        </Card>
    )
}